<!-- frontend/src/components/movie/PersonalNav.vue -->
<template>
    <div id="tabs" class="flex justify-start items-center py-4 bg-gray-100">
        <div class="px-4 text-md">
            <RouterLink 
                to="/personal" 
                class="hover:text-primary-200"
                :class="{ 'text-primary-200 font-semibold': isActive('/personal') }"
            >
                账号信息
            </RouterLink>
        </div>
        <div class="px-4 text-md">
            <RouterLink 
                to="/change_password" 
                class="hover:text-primary-200"
                :class="{ 'text-primary-200 font-semibold': isActive('/change_password') }"
            >
                修改密码
            </RouterLink>
        </div>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

// 检查当前路由是否激活
const isActive = (path) => {
    return route.path === path
}
</script>

<style scoped>
/* 可以添加过渡效果 */
.router-link-active {
    position: relative;
}

.router-link-active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transition: transform 0.3s ease;
}
</style>